<template>
	<view class="Search">
		<u-navbar title="搜索" back-icon-color="#fff" :background="background" title-color="#fff"></u-navbar>
		<view class="u-page">
			<u-search placeholder="搜索歌曲" v-model="keyword" @custom="Search"></u-search>
			<view class="music-List">
				<view class="music-ListItem" v-for="(item, index) in searchList" @click="goPlayer(index)" :key="item.id">
					<u-icon name="search"></u-icon>
					<text class="musicName">{{item.musicName}}</text>
					<text>{{item.singer}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from "vuex"
	export default {
		data() {
			return {
				background: {},
				textColor: "",
				keyword: "",
				searchList: [],
				hoverKey: false,
			}
		},
		computed: {
			...mapState({
				list:({config})=>config.tabBarList,
				commonColor: ({config})=>config.commonColor,
			})
		},
		methods: {
			...mapMutations({
				SET_List: "config/SET_List",
				SET_index: "config/SET_index",
			}),
			Search() {
				if(this.keyword.trim()) {
					this.$http.get("/queryWXKeyWords.htm", {keyWords: this.keyword.trim()}).then(res => {
						console.log(res);
						this.searchList = res.result;
					})
				} else {
					uni.showToast({
					    title: '歌曲名字不能为空',
					    icon: "none"
					});
				}
			},
			goPlayer(index) {
				this.SET_List(this.searchList);
				this.SET_index(index);
				uni.navigateTo({
					url: "/pages/Player/Player"
				})
			}
		},
		created() {
			this.background["backgroundColor"] = this.commonColor;
			this.textColor= this.commonColor;
		}
	}
</script>

<style lang="less" scoped>
.Search {
	display: flex;
	flex-direction: column;
	height: 100%;
	.u-page {
		flex: 1;
		overflow: hidden;
		padding: 20rpx;
		.music-List {
			padding-top: 20rpx;
			.music-ListItem {
				font-size: 30rpx;
				padding: 15rpx 0;
				.musicName {
					padding: 0 15rpx;
					color: #d43c33;
				}
				.hover{
					background-color: #e3e3e3;
				}
			}
		}
	}
}
</style>
